/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    TouchableOpacity,
    AlertIOS
} from 'react-native';

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');

export default class account extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerText}>
                        账号
                    </Text>
                </View>
                <Image source={{uri:'./Image/head.jpg'}} style={styles.tgIconStyle}/>
                <TextInput placeholder={'请输入用户名'}  style={styles.tgTextInputStyle} />
                <TextInput placeholder={'请输入密码'} keyboardType={'phone-pad'} password={true}  style={styles.tgTextInputStyle} />
                <TouchableOpacity
                    activeOPacity={0.5} onPress={this.pushTo.bind(this)}
                >
                <View style={styles.tgLoginBtnStyle}>
                    <Text style={{color:'white'}}>登录</Text>
                </View>
                </TouchableOpacity>
                <View style={styles.tgSettingStyle}>
                    <Text>无法登录</Text>
                    <Text>新用户</Text>
                </View>
                <View style={styles.tgOtherLoginStyle}>
                    <Text>其他登录方式: </Text>
                    <Image  source={{uri:'./Image/屏幕快照 2018-04-08 下午6.16.17.png'}}  style={styles.tgOtherImageStyle} />
                    <Image  source={{uri:'./img/targetcloud.png'}}  style={styles.tgOtherImageStyle} />
                    <Image  source={{uri:'./img/targetcloud.png'}}  style={styles.tgOtherImageStyle} />
                </View>
            </View>
        );
    }
    pushTo(){
        AlertIOS.alert('账号和密码不能为空')
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',

    },
    header:{
        paddingTop:25,
        paddingBottom:15,
        backgroundColor:'#dddddd',
        borderBottomWidth:0.5,
        borderBottomColor:'black',
    },
    headerText:{
        fontSize:16,
        fontWeight:'600',
        textAlign:'center',
    },
    tgIconStyle:{
        width:80,
        height:80,
        marginTop:60,
        marginBottom:30,
        borderRadius:40,
        marginLeft:width/2 -40,
        borderWidth:1,
        borderColor:'grey'
    },

    tgTextInputStyle:{
        width:width*0.8,
        height:38,
        borderColor: 'lightgrey',
        borderWidth: 1,
        marginBottom:8,
        borderRadius:4,
        textAlign:'left',
        alignSelf:'center'
    },

    tgLoginBtnStyle:{
        height:38,
        width:width*0.8,
        backgroundColor:'#00BB00',
        marginTop:8,
        marginBottom:20,
        marginLeft:(width- width*0.8) / 2,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:4,
        backgroundColor:'blue',
    },

    tgSettingStyle:{
        flexDirection:'row',
        marginLeft:20,
        marginRight:20,
        justifyContent:'space-between'
    },

    tgOtherLoginStyle:{
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        bottom:width*0.1,
        left:width*0.1
    },

    tgOtherImageStyle:{
        width:40,
        height:40,
        borderRadius:20,
        marginLeft:8
    }

});